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Case Study: 1 
Background 
Business requirements 


In this section, you will see one or more sets of questions with the same scenario and problem. Each 
question presents a unique solution to the problem, and you must determine whether the solution 
meets the slated goals. Any of the solutions might solve the problem. It is also possible that none o' 
the solutions solve the problem. 


Technical requirements 
Application structure 


Once you answer a question in this section, you will NOT be able to return to it. As a result, these 
questions will not appe.ir in the review screen. 


The timeline element of the app has the following layout requirements: 
e the timeline must adapt to the screen size and orientation of the device. 


e The timeline size must dynamically change if the window containing the content is resized by the 
user. 


e The user must be able to scroll through the timeline horizontally when the device is in landscape 
mode. 


e The user must be able to scroll through the timeline vertically when the device is in portrait mode. 


e The timeline must begin scrolling as soon as a scroll is detected. Scrolling must continue for a 
short distance after the scroll input has stopped. 


e Scroll bars or panning controls must always be visible. 


The following image depicts the layout for the timeline section of the app when the device is using 
landscape orientation: 


the following image depicts the layout tor the timeline section of the app when the device is using 
portrait orientation: 


The content element of the app has the following layout requirements: 
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When a user selects an item on the timeline, the details for that item must display beneath or to the 
right of the timeline 

e The content section must display one page of information. The element must be a child of the 
selected item in the timeline. 

e Users must be able to return to a previously selected event by pressing the Back button. 


the he user must be able to navigate the application using the interface below: 


Navigation * <] = 
Favorite Back Forward 
Notes 


e The Favorite button mark the Current content to he displayed in a Favorites panel. 


e The Back and Forward buttons navigate through the app selection history. Both buttons must 
available on all device. 


e The Note button allows the use to manage notes about the current content. 

e The app must support touch, mouse, and stylus input. 

e The app layout must automatically adapt to the screen size and orientation. 

Layout Requirement: 

You identify the following layout requirements: 

General 

e All user interface (UI) elements must continuously scale when a user resizes the window. 

e Ul controls must be smaller and spaced closet together if there is a mouse 01 stylus available 


e Ul controls must be larger and spaced farther apart if the device supports touch and there is no 
mouse or pointer available 


Timeline 


e The timeline must be displayed In a horizontal layout when the device is in a landscape orientation 
or 


When the horizontal width is greater than the vertical height. 


e The timeline must be displayed in a vertical layout when the device- is m a portrait orientation or 
when the vertical height is greater than the horizontal width. 


e Each item in the past must be linked to the next item in the future 


e User must be able to scroll from past events to future events 01 from future events to past 
events. 


e The app must only allow one level of detail to be linked to each item in the timeline 


New Tab: 
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You must optimize the app using the following guidelines: 


e You must minimize the lime n takes to display content when an item on the timeline is selected. 


e The app must respect memory and resource constraints for all devices. 
XML coding style: 
All code and markup must conform to the following style guidelines: 


e Use resource dictionaries for styles that are used more than once. 


Limit the use of nested panels. 


Use built-in properties of existing panels instead of using separate style objects. 


e Use the navigation structure that best models the data without exceeding the requirements of the 


app. 


MainPage.xaml 


Relevant portions of the app files are shown below, (line numbers in the code segments are included 
for reference only and include a two character prefix that denotes the specific file to which they 


belong.) 


MPO1 <Page 
x: Class ="_70357rm.MainFace” 
xmins="http://schemas.microsoft.com/winfix/2006/xaml/presentation” 
xmins: x ="http; //schemas.microsoft.com/wintx/2006/xaml” 


="400" 


xmins: iocal = “using: 70357rm” 
xmins: dä Wideman Boh, Ue, WARF A 
xmins: m ="http://schemas.openxmlformats.org/markup-compatibility/z006” 
mc: ik ="q"> 
MPO2 ‘Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush)”> 
MP03 
MPO4 <Relativ ] xrderBrush ="Gray” BorderThickness ="10”> 
MPOS :Name="A1l” Fill ="Red” MinHeicht="200" MinWidth ="400” 
AliognLefcwWithPanei ="True” 
-AlignTopwWithPanei = “False” /> 
MPOG Jame ="BL” Fili="Biue” Minkeight="200" MinWidth 
i.Beiow ="Al” 
i.RightOf = “” 
1.AlignRightWithPanel = “True” 
i .AlignBottomWithPanel = “False” /> 
MP07 </ 
MPOE </ Grid> 


MPOS </ Page> 


Relevant portions of the app files are shown below, (Line numbers in the code segments are included 
for reference only and include a two character prefix that denotes the specific file to which they 


belong.) 
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AS01 <Page 
x: Class ="_70357rm,Settings” 
xmins="http: //schemas.microsoft.com/winfix/2Z006/xaml/presentation” 
xmins: x ="http://schemas.microsoft.com/wintx/2006/xaml” 
xmins: local = “using:_70357rm” 
xmins: d ="http://schemas.microsoft.com/expression/blend/2008” 
xmlns: m ="http://schemas.openxmlformats.org/markup-compatibility/2006€” 
mc: Ignorable ="d"> 


A502 <Grid Background ="AliceBlue"> 

ASO3 <Border BorderBrush ="DarkBlue” BorderThickness = “5” /> 

AS04 <Grid Margin ="5 5 5 5"> 

A505 <StackPanel HorizontalAlignment ="Center”> 

ASOE <TextBlock Text =“Date Settings” Foreground ="DarkBlue” Font¥Family="Ariai” 


FontSize ="20" FontStyle ="Normal” 
FontHeight ="Bold” Margin ="0 5 0 5” HorizontalAlignment="Center” /> 


BS07 <StackPanel Orientation ="Horizontal”> 

2506 <CheckBox Content ="Center on Date” FontFamily ="Arial” FontSize="14" 
FontStyle “Normal” Margin ="20,9,0,0"%/> 

ASOS <CheckBox Content ="Set Start Date” Font¥Family ="Arial” FontSize="14" 
FontStyie “Normal” Margin ="20,0,0,0"/> 

AS10 </StackPanel> 

ASil <TextBlock Text ="Start Date” Foreground ="DarkBlue” FontFamily="Arial” 


FontSize ="20" FontStyle ="Normal” 
FontWeizght ="Bold” Margin ="0 5 0 5” HorizontalAlignment="Center”/> 


BS12 <StackPanel Orientation ="Horizontal”> 

AS13 <TextBlock Text ="Month:" Width ="75” /> 

AS14 <TextBox Width ="200" /> 

A515 </StackPanel> 

AS16 <StackPanel Orientation ="Horizontal”> 

AS17 <TextBlock Text ="Day:” Width ="75” /> 

ASi8 <TextBox Width ="200 /> 

A519 </StackPanel> 

AS20 <StackPanel Orientation ="Horizontal”> 

BS21 <TextBlock Text ="Year:" Wideh ="75" /> 

AS22 <TextBlock Width ="200" /> 

AS23 </StackPanel> 

2524 <Ellipse Fill ="Blue” Widthe="50" Height="50" Margin ="0 5 0 5”/> 
A525 <TextBlock FontFamily ="Arial” FontSize ="14" Foreground="White” Text ="Save” 
Margin ="127 -38 9 0”/> 

AS26 </StackPanel> 

AS27 </Grid> 

2528 

2529 </Grid> 


A530 </Page> 


Relevant portions of the app files are shown below.(Line numbers in the code segments are included 
for reference only and include a two-character prefix that denotes the specific file to which they 
belong.) 
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al <ResourceDictionary 


02 xmins="http://schemas.microsoft.com/wintx/2006/xaml/presentation” 
03 xmins:x="http://schemas.microsoft.com/winfx/2006/xaml“ 
a4 xumins:iocal="using:_70357rm”> 
os <Style x:Key="fill”’> 
oë <Setter Property="Foreground” Value="DarkBlue”/> 
07 </Style> 
ag <Style x:Key="text"> 
as <Setter Property="FontFamily” Vaiue="Arial"/> 
10 </Style> 
pL <Style x:Key="big”> 
12 <Setter Property="FontSize” Value="25"” /> 
13 </Style> 
14 <Style x:Key="smail”> 
15 <Setter Property="FontSize” Value="14"/> 
1é </Style> 
17 <Style x: Key="strong”> 
18 <Setter Property="FontWeight” Value="80ld"/> 
19 </Style> 
20 <Style x:Kev="light”> 
A ¿Setter Property="FontWeight” Value="Normal"/> 
22 </Style> 
23 <Style x:Key="normal”> 
24 <Setter Property=" FontStyle” Value="Normai”/> 
25 </Style> 
26 <Style x:Key="pad"> 
27 <Setter Property="Margin” Value="0 5 0 5”/> 
28 </Style> 
29 <Style x: Key="gap”"> 
39 <Setter Property="Margin” Value="20 39 0 0”/> 
al </Style> 
32 <Style x: Key="middie”"> 
33 <Setter Property="HorizontalAlignment” Value="Center”/> 
34 </5tyle> 
35 <Style TargetType="CheckBox” x:Key="check"> 
36 <Setter Přopetty=“FontFamiiy” Value="Ariai” /> 
37 <Septer Property="FontSize” Value="14" /> 
33 <Setter Property="FontStyle” Vaiue="Normal” /> 
39 <Setter Property="Margin” Value="20 5 0 0" /> 
49 </Style> 
41 <Style TargetType="TextBox” x:Key="heading™> 
42 <Setter Property="Foreground” Vaiue="DarkBiue” /> 
43 <Setter Property="FontFamily” Vaine="Arial” /> 
44 <Setter Property=" FontSize” Value="20" /> 
45 <Setter Property="FontStyle” Value="Normai” /> 
46 <Setter Property="FontWeight” Vaiue="Bold” /> 
47 <Setter Property="Margin” Value="0 5 0 5” /> 
48 <Setter Property="HorizontalAlignment” Value="Center” /> 
49 </Style> 


50 </ResourceDictionary> 


New Tab: 


Relevant portions of the app files are shown below.(Line numbers in the code segments are included 
for reference only and include a two-character prefix that denotes the specific file to which they 
belong.) 
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void App BackRequest (object sender, Windows.UI.Core.BackRequestedEventArgs ©) 
Frame page = Window.Current.Content as Frame; 
if ( page != null) 
f 
if ( page.CanGoBack ) 
{ 
pacge.GoBack(}; 


} 


Question: 1 


Note: This question is part of a series of questions that present the same scenario. Each 

question in the series contains n unique solution. Determine whether the solution meets the stated 
goals. 

You need to implement the appropriate XAML layout for the Timeline app. 

Solution: You create an instance of a StackPanel class. 

Does this meet the goal? 


A. Yes 
B. No 


Answer: B 


Explanation: 

StackPanel is a simple layout panel that arranges its child elements into a single line that can be 
oriented horizontally or vertically. StackPanel controls are typically used in scenarios where you want 
to arrange a small subsection of the UI on your page. 

The following XAML shows how to create a vertical StackPanel of items. 

XAML 

<StackPanel> 

<Rectangle Fill="Red" Height="44"/> 

<Rectangle Fill="Blue" Height="44"/> 

<Rectangle Fill="Green" Height="44"/> 

<Rectangle Fill="Orange" Height="44"/> 

</StackPanel> 

The result looks like this. 
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Question: 2 


Note: This question is part of a series of questions that present the same scenario. Each 

question in the series contains n unique solution. Determine whether the solution meets the stated 
goals. 

You need to implement the appropriate XAML layout for the Timeline app. 

Solution: You create an instance of a SplitView control. 

Does this meet the goal? 


A. Yes 
B. No 

Answer: B 
Explanation: 


A split view control has an expandable/collapsible pane and a content area. 
Here is an example of the Microsoft Edge app using SplitView to show its Hub. 


https://www.certkillers.net 


Questions & Answers PDF Page 9 


B a Bing x Eee 
= > ©) A | a bing.com/?toHttps=1 &redig= 


Images Videos Maps x = 


Reading list 


. » Stay on top of your reading 
> Bing 


Click + in the address bar to save an article to 
read later. 


Question: 3 


Note: This question is part of a series of questions that present the same scenario. Each 

question in the series contains n unique solution. Determine whether the solution meets the stated 
goals. 

You need to implement the appropriate XAML layout (or the Timeline app. 

Solution: You create an instance of a RelativePanel class. 

Does this meet the goal? 


A. Yes 
B. No 


Answer: A 


RelativePanel lets you layout UI elements by specifying where they go in relation to other elements 
and in relation to the panel. By default, an element is positioned in the upper left corner of the 
panel. 


Question: 4 


DRAG DROP 
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You need to create the user interface for the timeline. 
Which four markup segments should you use to develop the solution? To answer, move the 
appropriate markup segments from the list of markup segments to the answer area and arrange 


them in the correct order. 


NOTE: More than one order of answer choices is correct. You will receive credit for any of the correct 


orders you select. 
Markup segments 


<Button Content ="Favorite” 
Click =“UiButton_Click”/> 
<TextBlock Text =” |” Margin = 
"02:50:22 > 

<Button Content ="Back” Click = 
‘“UiButton: Click”/> 

<Button Content = “Forward” 
Click ="UiButton_Click”/> 


<AppBar> 
</CommandBar> 
<CommandBar> 


<AppBarButton Icon =”Favorite” 
Label ="Favorite” 
Click="UiButon_Click”/> 
<AppBarSeparator /> 
<AppBarButton Icon = “Back” 
Label = “Back” 
Ciick="UiButton_ Click” /> 
<AppBarButton Icon =”"Forward” 
Label = “Forward” 
Click="UiButton_Click”/> 


<AppBar.Tag> 

<Button Content = “Comment” 
Click="UiButton_Click"”/> 
</AppBar .Tag> 
</AppBar.Content> 

<TextBlock Text ="Navigation” 
Margin ="12,14"/> 
</AppBar.Content> 


<CommandBar .SecondaryCommands> 
<AppBarButton Icon="Comment” 

Label = “Notes” 
Click="UiButton_Click”/> 

</CommandBar.SecondaryCommands> 

<CommandBar .Content> 

<TextBlock Text = “Navigation” 

Margin ="12,14"/> 

</CommandBar .Content> 


</AppBar> 


Answer Area 


Answer: 
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Answer Area 


moaencitlas: 


ai Butt 


Datei i 


Box 1: <Commandbar> 

Command bars (also called "app bars") provide users with easy access to your app's most common 
tasks, and can be used to show commands or options that are specific to the user's context, such as a 
photo selection or drawing mode. They can also be used for navigation among app pages or between 
app sections. Command bars can be used with any navigation pattern. 

XAML provides both the AppBar control and the CommandBar control. You should use the AppBar 
only when you are upgrading a Universal Windows 8 app that uses the AppBar, and need to minimize 
changes. For new apps in Windows 10, we recommend using the CommandBar control instead. 

Box 2: <AppBarButton .. etc. 

The CommanaBar control is a general-purpose, flexible, light-weight control that can display both 
complex content, such as images or text blocks, as well as simple commands such as AppBarButton, 
AppBarToggleButton, and AppBarSeparator controls. 

Box 3: <CommandBar.SecondaryCommands> etc. 

The overflow menu is shown only when the command bar is open and the SecondaryCommands 
property is populated. The new dynamic overflow behavior will automatically move primary 
commands into the SecondaryCommands area when space is limited. 

Box 4: </Commandbar> 

Example: Here is a same command bar in its open state. The labels identify the main parts of the 
control. 
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Like 


Dislike 


Now playing... x6 © | < O > = 


Shuffle Repeat Back Stop Play Forward 


Content Primary commands More 
This example creates the command bar shown above. 
<CommandBar> 
<AppBarToggleButton Icon="Shuffle" Label="Shuffle" Click="AppBarButton_Click" /> 
<AppBarToggleButton Icon="RepeatAll" Label="Repeat" Click="AppBarButton_Click"/> 
<AppBarSeparator/> 
<AppBarButton Icon="Back" Label="Back" Click="AppBarButton_Click"/> 
<AppBarButton Icon="Stop" Label="Stop" Click="AppBarButton_Click"/> 
<AppBarButton Icon="Play" Label="Play" Click="AppBarButton_Click"/> 
<AppBarButton Icon="Forward" Label="Forward" Click="AppBarButton_Click"/> 
<CommandBar.SecondaryCommands> 
<AppBarButton Icon="Like" Label="Like" Click="AppBarButton_Click"/> 
<AppBarButton Icon="Dislike" Label="Dislike" Click="AppBarButton_Click"/> 
</CommandBar.SecondaryCommands> 
<CommandBar.Content> 
<TextBlock Text="Now playing..." Margin="12,14"/> 
</CommancBar.Content> 
</CommancBar> 
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